<template>
  <div class="aaa">
    <div class="header">
      <div class="left">
        <div class="headertop">
          <div class="leftt">
            <div class="gdan">
              <h4>工单统计</h4>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="box2">
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>28</h2>
                  <span>工单总数(个)</span>
                </div>
              </div>
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>1</h2>
                  <span>完成工单(个)</span>
                </div>
              </div>
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>0</h2>
                  <span>进行工单(个)</span>
                </div>
              </div>
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>27</h2>
                  <span>取消工单(个)</span>
                </div>
              </div>
            </div>
          </div>
          <div class="rightt">
            <div class="gdan">
              <h4>销售统计</h4>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="box2">
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>6562</h2>
                  <span>订单量（个）</span>
                </div>
              </div>
              <div class="gdanbottom">
                <div class="classbom">
                  <h2>4.37</h2>
                  <span>销售额（万元）</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="top1">
            <div class="gdan">
              <h4>销售数据</h4>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="top2">
              <div ref="box" class="chart-box"></div>
              <div ref="box1" class="chart-box1"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="gdan">
          <h4>销售统计</h4>
          <span>2023.03.01 ~ 2023.03.14</span>
        </div>
        <template>
          <el-table :data="tableData" class="customer-no-border-table">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="name"></el-table-column>
            <el-table-column prop="address"></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="shu">
          <h4>合作商点位数Top5</h4>
          <i class="el-icon-more"></i>
        </div>
        <div class="chart-box">
          <div ref="box2" class="box3"></div>
          <div class="hezuos">
            <h2>16</h2>
            <p>点位数</p>
            <h2>5</h2>
            <p>合作商数</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="shu">
          <h4>异常设备监控</h4>
          <i class="el-icon-more"></i>
        </div>
        <div class="zhanwu">
          <div class="url"></div>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import { tongji, paiming } from "@/api/user";

export default {
  name: "DashboardName",
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          address: "10",
        },
        {
          name: "王小虎",
          address: "20",
        },
        {
          name: "王小虎",
          address: "30",
        },
        {
          name: "王小虎",
          address: "40",
        },
        {
          name: "王小虎",
          address: "50",
        },
        {
          name: "王小虎",
          address: "60",
        },
        {
          name: "王小虎",
          address: "70",
        },
        {
          name: "王小虎",
          address: "80",
        },
        {
          name: "王小虎",
          address: "90",
        },
        {
          name: "王小虎",
          address: "100",
        },
      ],
      form: {
        vmType: "",
        nodeId: "",
        createUserId: "",
      },
    };
  },
  created() {
    // this.paiming();
    // this.tongji();
  },
  methods: {
    // async paiming() {
    //   const res = await paiming(this.form);
    //   console.log(res);
    // },
    // async tongji() {
    //   const res = await tongji();
    //   console.log(res);
    // },
  },
  mounted() {
    const myChart = echarts.init(this.$refs.box);
    myChart.setOption({
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["星期一", "星期二", "星期三", "星期四"],
      },
      yAxis: {
        type: "value",
      },
      color: [
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "red", // 0% 处的颜色
            },
            {
              offset: 0,
              color: "pink", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      series: [
        {
          data: [4178, 1996, 1248, 0],
          type: "line",
          smooth: true,
          areaStyle: {},
        },
      ],
    });
    const myChart1 = echarts.init(this.$refs.box1);
    myChart1.setOption({
      title: [
        {
          left: "center",
          text: "销售额分布",
        },
      ],
      xAxis: {
        type: "category",
        data: ["北京平", "露营街"],
      },
      yAxis: [
        {
          name: "单位:元",
          type: "value",
        },
      ],
      series: [
        {
          data: [1800, 300],
          type: "bar",
          barWidth: 20,
        },
      ],
    });
    const myChart2 = echarts.init(this.$refs.box2);
    myChart2.setOption({
      series: [
        {
          type: "pie",
          radius: [30, 100],
          roseType: "edge",
          data: [
            { value: 62.5, name: "金燕龙合作商62.5%" },
            { value: 12.5, name: "天华物业12.5%" },
            { value: 12.5, name: "北京合作商12.5%" },
            { value: 6.25, name: "likede6.25%" },
            { value: 6.25, name: "佳佳6.25%" },
          ],
        },
      ],
    });
  },
};
</script>

<style lang="scss">
.aaa {
  width: 100%;
  height: 100%;
  background-color: #f8fafd;

  .bottom {
    width: 100%;
    min-height: 300px;
    // background-color: red;
    display: flex;

    .left {
      width: 60%;
      height: 300px;
      background-color: white;
      margin-right: 20px;
      border-radius: 20px;

      .chart-box {
        display: flex;
        justify-content: space-between;

        .box3 {
          width: 400px;
          height: 300px;
        }

        .hezuos {
          width: 140px;
          height: 220px;
          background-color: #f8f8f9;
          margin-right: 50px;

          h2 {
            margin-left: 30px;
            color: #072074;
          }

          p {
            margin-left: 30px;
            font-size: 12px;
          }
        }
      }

      .shu {
        display: flex;
        justify-content: space-between;

        h4 {
          margin-left: 20px;
        }

        i {
          margin-right: 20px;
          margin-top: 25px;
        }
      }
    }

    .right {
      width: 45%;
      height: 300px;
      background-color: white;
      border-radius: 20px;

      .shu {
        display: flex;
        justify-content: space-between;

        h4 {
          margin-left: 20px;
        }

        i {
          margin-right: 20px;
          margin-top: 25px;
        }
      }

      .zhanwu {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .url {
        height: 200px;
        width: 200px;
        background: url("https://likede2-admin.itheima.net/img/empty.87c4f71b.png")
          no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .header {
    min-height: 500px;
    width: 100%;
    margin-bottom: 28px;
    display: flex;

    .left {
      min-height: 500px;
      width: 1000px;
      margin-right: 20px;

      .headertop {
        display: flex;
        width: 1000px;
        height: 200px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .leftt {
          flex: 1;
          width: 485px;
          height: 200px;
          //background-color: rgb(233, 243, 255);
          border-radius: 20px;
          background: url(),
            url(https://likede2-admin.itheima.net/img/task.66b715b7.png)
              no-repeat calc(100% - 12px) 100%;

          .gdan {
            display: flex;
            align-items: center;
            margin-left: 20px;
          }

          .box2 {
            display: flex;

            .gdanbottom {
              width: 160px;
              height: 107px;
              flex: 1;

              .classbom {
                display: flex;
                flex-direction: column;

                h2 {
                  margin-left: 50px;
                  font-size: 36px;
                  margin-top: -5px;
                  color: #072074;
                  text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
                }

                span {
                  height: 17px;
                  margin-top: -24px;
                  margin-left: 55px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #91a7dc;
                  line-height: 17px;
                }
              }
            }
          }
        }

        .rightt {
          width: 485px;
          height: 200px;
          //background-color: rgb(251, 239, 232);
          border-radius: 20px;
          background: #fbefe8
            url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png)
            no-repeat calc(100% - 12px) 100%;
        }
      }

      .gdan {
        display: flex;
        align-items: center;
        margin-left: 20px;

        span {
          font-size: 12px;
          color: #999999;
          margin-left: 10px;
        }
      }

      .box2 {
        display: flex;

        .gdanbottom {
          width: 160px;
          height: 107px;
          flex: 1;

          .classbom {
            display: flex;
            flex-direction: column;

            h2 {
              margin-left: 50px;
              font-size: 36px;
              margin-top: -5px;
              color: #ff5757;
              text-shadow: 2px 4px 7px rgb(255 87 87 / 50%);
            }

            span {
              height: 17px;
              margin-top: -24px;
              margin-left: 55px;
              font-size: 12px;
              font-weight: 400;
              color: #ff5757;
              line-height: 17px;
            }
          }
        }
      }

      .bottom {
        width: 1000px;
        height: 375px;
        background-color: #fff;
        border-radius: 20px;

        .top2 {
          display: flex;
          justify-content: space-between;
        }

        .top1 {
          .chart-box {
            width: 450px;
            height: 300px;
          }

          .chart-box1 {
            width: 450px;
            height: 300px;
          }
        }
      }
    }

    .right {
      min-height: 500px;
      width: 300px;
      background-color: #fff;
      border-radius: 20px;

      .gdan {
        display: flex;
        align-items: center;
        margin-left: 20px;

        span {
          font-size: 12px;
          color: #999999;
          margin-left: 10px;
        }
      }

      //.el-table__row > td {
      //  border: none;
      //}
      //
      //.el-table::before {
      //  height: 0px;
      //}

      /*去掉表格单元格边框*/
      .customer-no-border-table th {
        border: none;
      }

      .customer-no-border-table td,
      .customer-no-border-table th.is-leaf {
        border: none;
      }

      /*表格最外边框*/
      .customer-no-border-table .el-table--border,
      .el-table--group {
        border: none;
      }

      /*头部边框*/
      .customer-no-border-table thead tr th.is-leaf {
        border: 0px solid #ebeef5;
        border-right: none;
      }

      .customer-no-border-table thead tr th:nth-last-of-type(2) {
        border-right: 0px solid #ebeef5;
      }

      /*表格最外层边框-底部边框*/
      .customer-no-border-table .el-table--border::after,
      .customer-no-border-table .el-table--group::after {
        width: 0;
      }

      .customer-no-border-table::before {
        width: 0;
      }

      .customer-no-border-table .el-table__fixed-right::before,
      .el-table__fixed::before {
        width: 0;
      }

      .customer-no-border-table .el-table__header tr th {
        background: #fff;
        color: #333333;
        padding: 3px;
        fontweight: 550;
        height: 36px;
        border: 0px;
        font-size: 15px;
      }
    }
  }
}
</style>
